<template>
	<view class="footer fixed">
		<view class="footer_box d-flex">
			<view v-for="item of list" class="footer_item pt-20 pb-20 d-flex" :key="item.id" @tap="onSwitchTab(item.url, item.id)">
				<view class="footer_item_icon mb-20 d-flex">
					<image class="icon" v-if="active !== item.id" :src="`/static/image/footer/icon${item.id}_1.svg`" mode="widthFix" />
					<image class="icon" v-else :src="`/static/image/footer/icon${item.id}_2.svg`" mode="widthFix" />
				</view>
				
				<text class="footer_item_title">{{ item.title }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive, getCurrentInstance } from 'vue'
	
	const active = ref(1)
	
	const list = reactive([
		{
			title: '首页',
			id: 1,
			url: '/pages/Home/index'
		},
		{
			title: '我要推广',
			id: 2,
			url: '/pages/Share/index'
		},
		{
			title: '我的',
			id: 3,
			url: '/pages/UserInfo/index'
		}
	])
	
	const instance = getCurrentInstance();
	const onSwitchTab = async (url, id) => {
		if (id !== 3) return uni.switchTab({url})
		
		try {
			const res = await instance?.proxy.globalOnlogin()
			
			res && uni.switchTab({url})
		} catch (err) {
			
		}
	}
</script>

<style scoped lang="scss">
.footer {
	padding: 25rpx;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 2;
	background-color: #fff;
	
	&_box {
		flex-direction: row;
		width: 100%;
		margin: auto;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, .1);
		border-radius: 80rpx;
	}
	
	&_item {
		flex: 1;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		&_icon {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			background-color: #F3F6FF;
			.icon {
				margin: auto;
				width: 30rpx;
			}
		}
		
		&_title {
			font: {
				size: 24rpx
			}
		}
	}
}
</style>